﻿(function ($) {

    $.fn.gMenu2Levels = function (options) {

        options = $.extend({
            overlap: 30,
            speed: 1000,
            reset: 1500,
            blobColor: 0,                       //0-100 || #000000 - #ffffff
            blobThickness: 2,
            easing: 'easeOutExpo',
            orientation: 'horizontal',          //horizontal - vertical
            float: 'left',                      //left - right
            fullSize: false,                    //true - false
            clickCallback: function () { },
            hoverCallback: function () { }
        }, options);

        var index = [], 
        methods = {
            buildMenu: function () {
                $('> li > ul', this).each(function () {
                    if (options.fullSize == true) {
                        $(this).parent().parent().parent().append($('<div></div>').addClass('submenu').css('display', 'none').append(this));
                    }

                    methods.addEvents.apply(this);
                    methods.addStyle.apply(this);
                    methods.addBlob.apply(this);
                    
                    methods.buildMenu.apply(this);
                });
            },

            buildMenuTree: function (level) {
                
                $(this).attr('data-menu-level', level);
                $('> li', this).attr('data-menu-level', level);
                $('> li', this).each(function (index) {

                    $(this).attr('data-menu-id', index);
                    $('> ul', this).attr( 'data-menu-parent-id' , $(this).data('menu-id') );
                    $('> ul', this).addClass('submenu-' + $(this).data('menu-level') + '-' + $(this).data('menu-id'));
                    methods.buildMenuTree.apply($('> ul', this), [parseInt($(this).data('menu-level')) + 1]);

                });
            },

            addEvents: function () {
                
                //eval("var reset" + $(this).data('menu-level') + ";");
                var reset;
                $('> li:not(.blob)', this).click(function () {
                    if (options.fullSize == true) {
                        methods.addFullSizeClickEvent.apply(this);
                    }
                    options.clickCallback.call(this);
                });
                
                $('> li:not(.blob)', this).hover(function () {
                    
                    //clearTimeout(reset);
                    methods.addBlobMouseoverEvent.apply(this);
                    if (options.fullSize == false) {
                        if ($('> ul', this).data("opened-menu") != "true") {
                            $('> ul', this).data("opened-menu", "true");
                            $('> ul', this).stop(true, true).slideDown(options.speed);
                        }
                    }
                    options.hoverCallback.call(this);
                }, function() {
                    methods.addBlobMouseoutEvent.apply(this);
                    if (options.fullSize == false) {
                        $('> ul', this).data("opened-menu", "false");
                        $('> ul', this).stop(true).slideUp(options.speed, function () {
                            $(this).css('display', 'none');
                        });
                    }
                });
                                
            },

            addStyle: function () {

                $(this).addClass(options.orientation);
                $('> li', this).css('float', options.float);

                $(this).css('padding', 0);
                $(this).css('margin', 0);

                if (options.fullSize == true && options.orientation == 'horizontal') {
                    $(this).css('list-style-type', 'none');
                    $('.submenu').css('width', '100%');

                    $('> li', this).css('width', 100 / parseInt(this.childElementCount) + '%');
                    $('> li', this).css('float', 'left');
                    $('> li', this).css('text-align', 'center');
                }
                else if (options.fullSize == true && options.orientation == 'vertical') {

                    $('> li', this).css('width', '100%');

                    $('> li', this).addClass('ui-button');
                    $('> li', this).addClass('ui-button-text-only');
                    $('> li a', this).addClass('ui-button-text');
                }
                else {

                    $('> li', this).addClass('ui-button');
                    $('> li', this).addClass('ui-button-text-only');
                    $('> li a', this).addClass('ui-button-text');
                    //$('> li', this).width($('> li', this).width());
                }
            },

            addBlob: function () {

                //var currentPageItem = methods.getCurrentPageItem.apply(this);
                var currentPageItem = $(this).closest('.menu');

                var blob = $('<li class="blob"></li>').css({
                    backgroundColor: options.blobColor,
                    position: 'absolute'
                }).appendTo(this);

                if (options.orientation == 'horizontal') {

                    blob.css('width', currentPageItem.width());
                    blob.css('height', options.blobThickness);
                    blob.css('left', currentPageItem.position().left);
                    blob.css('top', currentPageItem.position().top + parseInt(options.overlap) + (parseInt($(this).data('menu-level')) * $(this).height()));

                }

                if (options.orientation == 'vertical') {

                    blob.css('width', options.blobThickness);
                    blob.css('height', currentPageItem.height());
                    blob.css('left', currentPageItem.position().left + parseInt(options.overlap) + (parseInt($(this).data('menu-level')) * $(this).width()));
                    blob.css('top', currentPageItem.position().top);

                }

                if (options.blobColor >= 0 && options.blobColor <= 100) {
                    blob.progressbar({ value: options.blobColor });
                }

            },
            
            getCurrentPageItem: function () {
                var currentPageItem = $('> .selected', this)

                if (currentPageItem.length == 0)
                    currentPageItem = $($('li', this)[0]);

                return currentPageItem;
            },

            addFullSizeClickEvent: function () {

                if (!$(this).hasClass('selected')) {
                    if (options.orientation == 'horizontal') {
                        $('.submenu:visible', $(this).parent().parent())
                                .animate({ height: 'toggle' }, { duration: options.speed, easing: options.easing, queue: false });
                    } else {
                        $('.submenu:visible', $(this).parent().parent())
                                .animate({ width: 'toggle' }, { duration: options.speed, easing: options.easing, queue: false });
                    }
                    $('> .selected', $(this).parent()).removeClass('selected');
                    $(this).addClass('selected');
                }

                var tmp = $('.submenu-' + $(this).data('menu-level') + '-' + $(this).data('menu-id'));
                if (options.orientation == 'horizontal') {
                    tmp.parent().animate({ height: 'toggle' }, { duration: options.speed, easing: options.easing, queue: false });
                } else {
                    tmp.parent().animate({ width: 'toggle' }, { duration: options.speed, easing: options.easing, queue: false });
                }
                methods.getCurrentPageItem.apply(tmp).mouseover();
            },

            addBlobMouseoverEvent: function () {
                var blob = $('> .blob', $(this).parent());
                var _left = blob.position().left;
                var _width = blob.width();
                var _top = blob.position().top;
                var _height = blob.height();

                // mouse over
                if (options.orientation == 'horizontal') {
                    _left = $(this).position().left;
                    _width = $(this).width();
                }
                if (options.orientation == 'vertical') {
                    _top = $(this).position().top;
                    _height = $(this).height();
                }

                blob.stop().animate(
                    {
                        left: _left,
                        width: _width,
                        top: _top,
                        height: _height
                    },
                    {
                        duration: options.speed,
                        easing: options.easing,
                        queue: false
                    }
                );
                
            },

            addBlobMouseoutEvent: function () {
                var blob = $('> .blob', $(this).parent());
                var _left = blob.position().left;
                var _width = blob.width();
                var _top = blob.position().top;
                var _height = blob.height();

                // mouse out
                currentPageItem = methods.getCurrentPageItem.apply($(this).parent());
                if (options.orientation == 'horizontal') {
                    _left = currentPageItem.position().left;
                    _width = currentPageItem.width();
                }
                if (options.orientation == 'vertical') {
                    _top = currentPageItem.position().top;
                    _height = currentPageItem.height();
                }

                blob.delay(1000).animate({
                    left: _left,
                    width: _width,
                    top: _top,
                    height: _height
                }, options.speed)
            }


            
        };

        return this.each(function () {

            var mymenu = $('> ul', this)[0];

            methods.buildMenuTree.apply(mymenu, [0]);
            
            if (options.fullSize == false) {
                $('> li > ul', mymenu).menu();
            }

            if (options.fullSize == true) {
                methods.buildMenu.apply(mymenu);
            }
            
            methods.addEvents.apply(mymenu);
            methods.addStyle.apply(mymenu);
            methods.addBlob.apply(mymenu);

            methods.getCurrentPageItem.apply(mymenu).mouseover();
        }); // end each

    };

})(jQuery);
